<template>
	<view>
		<view v-for="(item,index) in findList" :key="item.findId">
			<!-- 用户信息以及发布时间 -->
			<view class="userInfoBox">
				<u-avatar :src="item.image" size="16vw"></u-avatar>
				<view class="userInfo" @longpress="delFind(item.findId,index,item.userId)">
					<view>
						{{item.name}}
					</view>
					<view class="findTime">
						{{changeTime(item.creatTime)}}
					</view>
				</view>
			</view>
			<!-- 说说详情 -->
			<view class="find">
				<view class="findMessage">
					{{item.content}}
				</view>
				<view class="findPicture">
					<view v-for="(picture,index) in item.pictures" :key="index">
						<image :src="picture" mode="aspectFit"></image>
					</view>
				</view>
			</view>
			<!-- 点赞及评论 -->
			<view class="evaluate">
				<u-icon name="thumb-up-fill" size="25px" color="red" @click="likeChange(index)"
					v-if="item.iLike"></u-icon>
				<u-icon name="thumb-up" size="25px" @click="likeChange(index)" v-else></u-icon>
				<u-icon name="chat" size="25px" @click="chat(index)"></u-icon>
			</view>
			<!-- 点赞列表 -->
			<view class="likeList" v-if="item.likeList && item.likeList.length!=0">
				<u-icon name="heart" size="6vw"></u-icon>
				<text class="text" v-for="like in item.likeList" :key="like.userId">{{like.name}}</text>
			</view>
			<!-- 评论列表 -->
			<view class="evaList" v-if="item.evaluateList && item.evaluateList.length!=0">
				<u-icon name="chat" size="6vw"></u-icon>
				<view class="eva" v-for="(eva,index2) in item.evaluateList" :key="index2">
					<view class="evaContent" @longpress="delEvaluate(eva.evaId,index,index2,eva.userId)">
						<text style="font-weight: 800;margin-right: 2vw;">{{eva.name}}:</text>
						<text style="word-break:break-all;">{{eva.content}}</text>
					</view>
				</view>
			</view>
			<!-- 评论弹出框 -->
			<u-popup :show="show" mode="bottom" overlayOpacity="0" @close="close">
				<view class="evaluatePopup">
					<u--input placeholder="请输入评论:" border="surround" v-model="value" class="input"></u--input>
					<u-button class="send" @click="sendEvaluate">发送</u-button>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import dateTime from '../../../utils/dateTime.js';
	export default {
		data() {
			return {
				userId: "",
				// 说说列表
				findList: [],
				// 弹出框状态
				show: false,
				index: 0,
				// 评论框的值
				value: ""
			}
		},
		onLoad(e) {
			this.getFindList(e.userId);
			this.userId = uni.getStorageSync("userId");
		},
		onPullDownRefresh() {
			this.getFindList();
			uni.stopPullDownRefresh();
		},
		methods: {
			changeTime(date) {
				return dateTime.dateTime(date);
			},
			delFind(findId,index,fUserId){
				if (this.userId == fUserId) {
					let that = this;
					uni.showModal({
						title: '提示',
						content: '确认要删除此帖子吗？',
						success: function(res) {
							if (res.confirm) {
								uni.request({
									url: getApp().url + 'findList/delFind',
									data: {
										findId: findId
									},
									header: {
										token: uni.getStorageSync("token")
									},
									method: "GET",
									success: (res) => {
										if (res.data.code == -1) {
											return uni.showToast({
												icon: "error",
												title: res.data.msg
											});
										};
										that.findList.splice(index, 1);
										uni.showToast({
											icon: "success",
											title: "删除帖子成功"
										});
									},
									fail: (error) => {
										console.log(error);
									}
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
			},
			// 更改点赞状态
			likeChange(index) {
				this.findList[index].iLike = !this.findList[index].iLike
				if (this.findList[index].iLike) {
					uni.request({
						url: getApp().url + 'likeList/addLike',
						data: {
							findId: this.findList[index].findId,
							userId: uni.getStorageSync("userId")
						},
						header: {
							token: uni.getStorageSync("token")
						},
						method: "POST",
						success: (res) => {
							if (res.data.code == -1) {
								return uni.showToast({
									icon: "error",
									title: res.data.msg
								});
							};
							this.findList[index].likeList.push({
								userId: uni.getStorageSync("userId"),
								name: uni.getStorageSync("name")
							})
							uni.showToast({
								icon: "success",
								title: "点赞成功"
							});
						},
						fail: (error) => {
							console.log(error);
						}
					})
				} else {
					uni.request({
						url: getApp().url + 'likeList/delLike',
						data: {
							findId: this.findList[index].findId,
							userId: uni.getStorageSync("userId")
						},
						header: {
							token: uni.getStorageSync("token")
						},
						method: "GET",
						success: (res) => {
							if (res.data.code == -1) {
								return uni.showToast({
									icon: "error",
									title: res.data.msg
								});
							};
							this.findList[index].likeList.splice(this.findList[index].likeList.indexOf({
								userId: uni.getStorageSync("userId"),
								name: uni.getStorageSync("name")
							}), 1)
							uni.showToast({
								icon: "success",
								title: "取消点赞成功"
							});
						},
						fail: (error) => {
							console.log(error);
						}
					})
				}
			},
			chat(index) {
				this.show = !this.show;
				this.index = index;
			},
			// 发送评论
			sendEvaluate() {
				var evaluateId = Math.floor(Math.random() * 900000000) + 1;
				uni.request({
					url: getApp().url + 'evaluateList/addEvaluate',
					data: {
						findId: this.findList[this.index].findId,
						userId: uni.getStorageSync("userId"),
						content: this.value,
						evaId: evaluateId
					},
					header: {
						token: uni.getStorageSync("token")
					},
					method: "POST",
					success: (res) => {
						if (res.data.code == -1) {
							return uni.showToast({
								icon: "error",
								title: res.data.msg
							});
						};
						this.findList[this.index].evaluateList.push({
							name: uni.getStorageSync("name"),
							userId: uni.getStorageSync("userId"),
							content: this.value,
							evaId: evaluateId
						});
						this.$forceUpdate();
						this.value = "";
						this.show = false;
						uni.showToast({
							icon: "success",
							title: "评论成功"
						});
					},
					fail: (error) => {
						console.log(error);
					}
				})
			},
			delEvaluate(e, index,index2, eUserId) {
				if (this.userId == eUserId) {
					let that = this;
					uni.showModal({
						title: '提示',
						content: '确认要删除此评论吗？',
						success: function(res) {
							if (res.confirm) {
								uni.request({
									url: getApp().url + 'evaluateList/delEvaluate',
									data: {
										evaId: e
									},
									header: {
										token: uni.getStorageSync("token")
									},
									method: "GET",
									success: (res) => {
										if (res.data.code == -1) {
											return uni.showToast({
												icon: "error",
												title: res.data.msg
											});
										};
										that.findList[index].evaluateList.splice(index2, 1);
										uni.showToast({
											icon: "success",
											title: "删除评论成功"
										});
									},
									fail: (error) => {
										console.log(error);
									}
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
			},
			// 关闭评论弹出框
			close() {
				this.show = false
			},
			getFindList(userId) {
				uni.request({
					url: getApp().url + 'findList/getFindList',
					data: {
						userId: uni.getStorageSync("userId"),
						friendId: userId,
						type:1
					},
					header: {
						token: uni.getStorageSync("token")
					},
					method: "GET",
					success: (res) => {
						if (res.data.code == -1) {
							return uni.showToast({
								icon: "error",
								title: res.data.msg
							});
						};
						this.findList = res.data.data
						console.log(this.findList)

					},
					fail: (error) => {
						console.log(error);
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.userInfoBox {
		display: flex;
		flex-wrap: wrap;
		padding: 5px 2vw;

		.userInfo {
			width: 78vw;
			display: flex;
			padding-left: 2vw;
			flex-direction: column;
			justify-content: space-around;

			.findTime {
				font-size: small;
				color: #A09D9D;
			}
		}
	}

	.find {
		padding: 5px 2vw;

		.findMessage {
			padding: 0 1vw;
			word-break: break-all;
		}

		.findPicture {
			display: flex;
			flex-wrap: wrap;

			image {
				padding: 1vw;
				width: 30vw;
				height: 30vw;
			}

		}
	}

	.likeList {
		display: flex;
		margin: 0 2vw;
		background-color: #F7F7F7;

		.text {
			margin-left: 2vw;
		}
	}

	.evaList {
		margin: 1vw 2vw;
		background-color: #F7F7F7;

		.eva {
			margin-left: 8vw;
			padding: 2vw 0;
			display: flex;
		}
	}

	.evaluate {
		display: flex;
		justify-content: flex-end;
		padding: 0 2vw;

		u-icon {
			margin-right: 2vw;
		}
	}

	.evaluatePopup {
		display: flex;
		align-items: center;
		margin: 0;

		.input {
			width: 76vw;
			height: 40px;
			margin: 2vw;
			background-color: #F8F8F8;
			border-radius: 10px;
		}

		.send {
			width: 16vw;
			height: 40px;
			margin: 2vw;
			background-color: #41A863;
			border-radius: 10px;
			font-size: 10px;
			line-height: 40px;
		}
	}

	.plus {
		position: sticky;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50rpx;
		z-index: 1;
		background-color: #41A863;
		bottom: 20vh;
		left: 80vw;
	}
</style>